<template>
    <div>
        <el-card class="box-card">
            <el-divider content-position="left"><span style="font-size: 18px">菜单管理</span></el-divider>
            <br>
            <!--  搜索功能-->
            <el-form :inline="true" :model="formSearch" class="demo-form-inline" ref="formSearch">
                <el-form-item label="目录或菜单名称" prop="name">
                    <el-input v-model="formSearch.name" placeholder=""></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="initMenuTable">查询</el-button>
                    <el-button @click="addOneMenu(null)" class="el-button el-button--warning">新增目录</el-button>
                    <el-button @click="resetForm('formSearch')" class="el-button el-button--info">重置</el-button>
                </el-form-item>
            </el-form>
        <tree-table
                class="tb-cate"
                index-text="序号"
                show-index
                stripe
                border
                :data="cateList"
                :columns="columns"
                :expand-type="false"
                :selection-type="false"
        >
            <template slot="path" slot-scope="scope">
                {{scope.row.path}}
            </template>
            <template slot="permissionValue" slot-scope="scope">
                {{scope.row.permissionValue}}
            </template>
            <template slot="icon" slot-scope="scope">
                {{scope.row.icon}}
            </template>
            <template slot="type" slot-scope="scope">
                <el-tag type="danger" effect="plain" size="mini" v-show="scope.row.type == 1" >{{'目录'}}</el-tag>
                <el-tag type="success" effect="plain" size="mini" v-show="scope.row.type == 2">{{'按钮'}}</el-tag>
                <el-tag type="primary" effect="plain" size="mini" v-show="scope.row.type == 3">{{'菜单'}}</el-tag>
            </template>
            <template slot="status" slot-scope="scope">
                <el-switch
                        v-model="scope.row.status"
                        @change="handleChangeStatus(scope.row)"
                        :active-value=0
                        :inactive-value=1
                        active-color="#ff4949"
                        inactive-color="#13ce66"
                        active-text="禁用"
                        inactive-text="正常">
                </el-switch>
            </template>
            <template slot="opt" slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" size="mini" :disabled="scope.row.status==0" @click="updateOneMenu(scope.row)">编辑</el-button>
                <el-button type="success" icon="el-icon-edit" size="mini":disabled="scope.row.status==0" @click="addOneMenu(scope.row)" v-show="scope.row.type!='2'">添加</el-button>
                <el-button type="danger" icon="el-icon-delete" size="mini":disabled="scope.row.status==0" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </tree-table>
        </el-card>


        <!--    添加编辑弹出层-->
        <el-dialog :title="titles" :visible.sync="FormVisible" width="30%" @close="disVisible=false">
            <el-form ref="formData" :model="form" label-width="80px">
                <el-form-item label="权限ID" v-if="addVisible">
                    <el-input v-model="form.id" disabled></el-input>
                </el-form-item>
                <el-form-item label="权限名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="路由路径" prop="path">
                    <el-input v-model="form.path"></el-input>
                </el-form-item>
                <el-form-item label="权限图标" prop="icon">
                    <el-input v-model="form.icon"></el-input>
                </el-form-item>
                <el-form-item label="权限值" prop="permissionValue">
                    <el-input v-model="form.permissionValue"></el-input>
                </el-form-item>

                <el-form-item prop="type" label="添加类型" v-if="disVisible">
                    <template>
                        <el-select v-model="form.type" placeholder="请选择添加的类型" style="width: 200px">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </template>
                </el-form-item>


            </el-form>
            <span slot="footer" class="dialog-footer">
                  <el-button @click="resetForm('formData')" >重 置</el-button>
                  <el-button @click="FormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="handleConfirm" >确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "subject",
        data() {
            return {
                titles:'',
                FormVisible:false,
                addVisible:true,
                disVisible:false,
                cateList: [],
                columns: [
                    {
                        label: "名称",
                        prop: "name",
                        type: "template",
                        template: 'name',
                        width: '230px'
                    },
                    {
                        label: "路由路径",
                        prop: "path",
                        type: "template",
                        template: 'path'
                    },
                    {
                        label: "权限值",
                        prop: "permissionValue",
                        type: "template",
                        template: 'permissionValue'
                    },
                    {
                        label: "图标",
                        prop: "icon",
                        type: "template",
                        template: 'icon',
                    },
                    {
                        label: "状态",
                        prop: "status",
                        type: "template",
                        template: 'status',
                        align:'center'
                    },
                    {
                        label: "级别",
                        prop: "type",
                        type: "template",
                        template: 'type',
                        width:'100px',
                        align:'center'
                    },
                    {
                        label: '操作',
                        type: 'template',
                        template: 'opt',
                        width:'300px',
                        align:'center'
                    }
                ],
                props: {
                    expandType: false,
                    selectionType: false,
                },
                //表单
                form:{
                    id:'',
                    name:'',
                    path:'',
                    icon:'',
                    type:'',
                    pid:'1',
                    permissionValue:''
                },
                formSearch:{
                    name:''
                },
                options: [{
                    value: '2',
                    label: '按钮',
                }, {
                    value: '3',
                    label: '菜单'
                }],

            }
        },
        created() {
            this.initMenuTable();
        },
        methods: {
            handleChangeStatus(req){
                var that=this;
                this.$http.post("/system/Permission/updateStatus", req).then(function(resp){
                    if (resp.data.code===2000){
                        that.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });
                        that.initMenuTable();
                    }else{
                        that.$message({
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }
                })
            },
            initMenuTable() {
                var that=this
                this.$http.post(`/system/Permission/selectPermissionAll`,this.formSearch).then((resp) => {
                    that.cateList = resp.data.result;
                });
            },

            //修改弹出层
            updateOneMenu(req){
                this.addVisible=true;
                if (req.type==1){
                    this.titles = '编辑目录';
                }else if(req.type==2){
                    this.titles = '编辑按钮'
                }else{
                    this.titles = '编辑菜单'
                }
                //深拷贝
                this.$nextTick(() => {
                    this.form = Object.assign({}, req);
                })
                this.titles = '编辑';
                this.FormVisible = true;
                this.disVisible=false;
            },
            //添加弹出层
            addOneMenu(req){
                this.addVisible = false;
                this.FormVisible = true;
                if (req==null){
                    this.form.pid='1'
                    this.titles = '新增目录';
                    this.form.type='1';
                }else if (req.pid=='1'){
                    this.form.type='';
                    this.titles = '新增菜单'
                    this.form.pid=req.id;
                    this.form.type='3';
                }else{
                    this.form.type='';
                    this.titles = '新增'
                    this.disVisible=true;
                    this.form.pid=req.id;
                }
                this.form.id='',
                this.$nextTick(() => {
                    this.resetForm('formData')
                })
            },
            //删除
            handleDelete(req){
                var that=this;
                this.$confirm('此操作将永久删除该权限, 是否继续？', '确认删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post(`/system/Permission/deleteMenu`,req).then(function (resp){
                        if (resp.data.code===2000){
                            that.$message({
                                message: resp.data.msg,
                                type: 'success'
                            });
                            that.initMenuTable();
                        }else{
                            that.$message({
                                message: resp.data.msg,
                                type: 'error'
                            });
                        }
                    })
                })
            },
            //添加或编辑
            handleConfirm(){
                var that=this;
                if (this.form.id!==''){
                    this.$http.post('/system/Permission/updateMenu',this.form).then(function(resp) {
                        if (resp.data.code===2000){
                            that.$message({
                                message: resp.data.msg,
                                type: 'success'
                            });
                            that.initMenuTable();
                            that.FormVisible=false;
                        }else{
                            that.$message({
                                message: resp.data.msg,
                                type: 'error'
                            });
                        }
                    });
                }else {
                    this.$http.post('/system/Permission/addMenu',this.form).then(function(resp) {
                        if (resp.data.code===2000){
                            that.$message({
                                message: resp.data.msg,
                                type: 'success'
                            });
                            that.initMenuTable();
                            that.FormVisible=false;
                            that.disVisible=false;
                        }else{
                            that.$message({
                                message: resp.data.msg,
                                type: 'error'
                            });
                        }
                    });
                }
            },
            //刷新表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
                if(formName === 'formSearch') {
                    this.initMenuTable();
                }
            }
        }
    }
</script>

<style>

</style>